<style>
.image {
  width: 100%;
  display: block;
}
.col_4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.member-chart {
  margin-top: 20px;
  margin-bottom: 20px;
}
.attendance {
  display: flex;
}
.attDate {
  display: flex;
  margin-left: 10%;
  width: 300px;
}
.dd-dataCenter-heading {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  padding-top: 5px;
  padding-left: 5px;
  font-weight: bold;
}
.padding-top20 {
  padding-top: 20px;
}
.dd-dataCenter-panel {
  max-width: 260px;
  width: 100%;
  height: 180px;
  border-radius: 4px;
  border: 1px solid #dfdfdf;
  box-shadow: 0;
  background: #fff;
  float: left;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 8px;
}
.dd-dataCenter-panel-hd {
  background: #cac9c9;
  color: #333;
  border-bottom: 1px solid #e8e8e8;
  font-size: 14px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 16px;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 15px;
  line-height: 1;
  text-align: center;
}
.dd-person-status {
  width: auto;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
  padding: 0 35px;
}
.pull-right {
  padding: 5px 5px;
  float: right;
  font-size: 16px;
}
</style>

<template>
  <basic-container>
    <el-container>
      <el-aside width="200px">
        <deptTree ref="building_tree" @treeNode-click="treeNodeClick"></deptTree>
      </el-aside>
      <el-main id="el-main">
        <div class="col-sm-12 member-chart ng-scope el-card box-card is-always-shadow">
          <h4 class="dd-dataCenter-heading ng-binding">社区总览</h4>
          <div class="row row padding-top20" style="display:flex;align-items:center;flex-wrap:wrap;">
            <div class="col_6" style="width:50%;margin-bottom:80px">
              <div id="memberLineChart" class="member-line-chart" _echarts_instance_="1543301061157" style="-webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;">
                <div id="myChart" :style="{width: '80%', height: '300px'}"></div>
              </div>
            </div>
            <div class="col_6" style="width:50%;margin-bottom:80px">
              <div id="ageLineChart" class="member-line-chart" _echarts_instance_="1543301061157" style="-webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;">
                <div id="myAgeChart" :style="{width: '100%', height: '300px'}"></div>
              </div>
            </div>
            <div class="col_6" style="width:50%;margin-bottom:80px">
              <div id="memberLineChart" class="member-line-chart" _echarts_instance_="1543301061157" style="-webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;">
                <div id="myCreChart" :style="{width: '100%', height: '300px'}"></div>
              </div>
            </div>
            <div class="col_6" style="width:50%;margin-bottom:80px">
              <div id="ageLineChart" class="member-line-chart" _echarts_instance_="1543301061157" style="-webkit-tap-highlight-color: transparent; user-select: none; background-color: rgba(0, 0, 0, 0); cursor: default;">
                <div id="areaChart" :style="{width: '100%', height: '300px'}"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-12 member-chart ng-isolate-scope el-card box-card is-always-shadow" style="padding:10px 5px;">
          <h4 class="dd-dataCenter-heading ng-binding" data-spm-anchor-id="0.0.0.i3.4bad77a3uZsHDb">业主查詢
            <span class="text-muted ng-binding" data-spm-anchor-id="0.0.0.i4.4bad77a3uZsHDb"></span>
          </h4>
          <div class="col-sm-12">
            <div class="col-sm-12 member-chart ng-scope el-card box-card" style="padding:10px 15px 0 15px">
              <el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
                <el-form-item class="el-form-item" label="业主姓名" prop="name">
                  <el-input class="filter-item" placeholder="业主姓名" v-model="filters.name"></el-input>
                </el-form-item>
                <el-form-item class="el-form-item" label="身份证号" prop="idCard">
                  <el-input class="filter-item" placeholder="身份证号" v-model="filters.idCard"></el-input>
                </el-form-item>
                <span class="bth_search">
                  <el-form-item>
                    <el-button type="success" icon="el-icon-search" v-on:click="getDataGrid(true)">查询</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button icon="el-icon-refresh" @click="resetSearchForm('filters')">重置</el-button>
                  </el-form-item>
                </span>
              </el-form>
            </div>
            <el-table :data="gridDatas" id="dataGrid" empty-text="当前小区没有该业主房产信息" border stripe size="mini" style="width: 100%;" height="280px">
              <el-table-column header-align="center" align="center" prop="index" :formatter="index_formatter" label="序号" width="60px"></el-table-column>
              <el-table-column header-align="center" align="center" prop="username" label="业主姓名" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="idCard" label="身份证号" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="area" label="房屋面积" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="houseType" label="房屋类型" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="familyCount" label="家庭成员数" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="marriage" label="婚姻状况" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="residence" label="是否常住" show-overflow-tooltip></el-table-column>
              <el-table-column header-align="center" align="center" prop="property" label="物业缴费是否正常" show-overflow-tooltip></el-table-column>
            </el-table>
          </div>
        </div>
      </el-main>
    </el-container>
  </basic-container>
</template>
<script>
import { getToken, setToken, removeToken, getFileIp } from '@/util/auth'
import request from '@/router/axios'
import deptTree from '../report/deptTree.vue'
export default {
  name: 'repairRegister',
  components: {
    deptTree
  },
  data() {
    return {
      statusOptions: [],
      communityOptions: [],
      buildingOptions: [],
      unitOptions: [],
      houseOptions: [],
      communityNames: ['入住率', '空置率'],
      creditNames: ['缴费正常', '偶尔欠费', '经常欠费'],
      ageNames: ['00后', '90后', '80后', '70后', '60后', '60前'],
      liftUserOptions: [
        {
          id: '',
          name: ''
        }
      ],
      //单元过滤条件
      filters: {
        name: '',
        idCard: ''
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      url: {
        //单元数据
        list: '/admin/repairRecord/page',
        save: '/admin/repairRecord/add',
        approve: '/admin/repairRecord/approve',
        submitSug: '/admin/repairRecord/fenpei'
      },
      gridDatas: [],
      zhangsan: [
        {
          index: 1,
          username: '赵湖',
          idCard: '370481199306031534',
          area: '约130平',
          houseType: '三室两厅',
          familyCount: '5',
          marriage: '已婚',
          residence: '否',
          property: '正常'
        }
      ],
      liuyu: [
        {
          index: 1,
          username: '刘宇',
          idCard: '370481199306031533',
          area: '约90平',
          houseType: '两室一厅',
          familyCount: '3',
          marriage: '已婚',
          residence: '否',
          property: '偶尔欠费'
        }
      ],
      suggestTypeOptions: [],
      sort: {
        sort: 'sort',
        order: 'asc'
      },
      total: 0,
      page: 1,
      pageSize: 10,
      listLoading: false,
      sels: [],
      addFormRules: {
        liftUser: [
          {
            required: true,
            message: '请选择业主 '
          }
        ],
        description: [
          {
            required: true,
            message: '请填写问题描述 '
          }
        ]
      }
    }
  },
  methods: {
    resetSearchForm() {
      this.filters.name = ''
      this.filters.idCard = ''
    },
    getDataGrid() {
      if (this.filters.name == '刘宇') {
        this.gridDatas = this.liuyu
      } else if (this.filters.name == '赵湖') {
        this.gridDatas = this.zhangsan
      } else {
        this.gridDatas = this.gridDatas
      }
    },
    drawLine() {
      const a = this
      var weatherIcons = {
        Sunny: './data/asset/img/weather/sunny_128.png',
        Cloudy: './data/asset/img/weather/cloudy_128.png',
        Showers: './data/asset/img/weather/showers_128.png'
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      let myAgeChart = this.$echarts.init(document.getElementById('myAgeChart'))
      let myCreChart = this.$echarts.init(document.getElementById('myCreChart'))
      let areaChart = this.$echarts.init(document.getElementById('areaChart'))
      var option = {
        title: {
          text: '小区居住情况',
          //subtext: '虚构数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['入住', '空置']
        },
        series: [
          {
            name: '居住情况',
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 1548,
                name: '入住',
                label: {
                  normal: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{per|{c}}',
                    backgroundColor: '#eee',
                    borderColor: '#aaa',
                    borderWidth: 1,
                    borderRadius: 4,
                    // shadowBlur:3,
                    // shadowOffsetX: 2,
                    // shadowOffsetY: 2,
                    // shadowColor: '#999',
                    // padding: [0, 7],
                    rich: {
                      a: {
                        color: '#999',
                        lineHeight: 22,
                        align: 'center'
                      },
                      // abg: {
                      //     backgroundColor: '#333',
                      //     width: '100%',
                      //     align: 'right',
                      //     height: 22,
                      //     borderRadius: [4, 4, 0, 0]
                      // },
                      hr: {
                        borderColor: '#aaa',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0
                      },
                      b: {
                        fontSize: 16,
                        lineHeight: 33
                      },
                      per: {
                        color: '#eee',
                        backgroundColor: '#334455',
                        padding: [2, 4],
                        borderRadius: 2
                      }
                    }
                  }
                }
              },

              { value: 735, name: '空置' }
            ]
          }
        ]
      }
      var creOption = {
        title: {
          text: '小区信用情况',
          //subtext: '虚构数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} :  {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: ['缴费正常', '偶尔欠费', '经常欠费']
        },
        series: [
          {
            name: '信用情况',
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 1548,
                name: '缴费正常',
                label: {
                  normal: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{per|{c}}',
                    backgroundColor: '#eee',
                    borderColor: '#aaa',
                    borderWidth: 1,
                    borderRadius: 4,
                    // shadowBlur:3,
                    // shadowOffsetX: 2,
                    // shadowOffsetY: 2,
                    // shadowColor: '#999',
                    // padding: [0, 7],
                    rich: {
                      a: {
                        color: '#999',
                        lineHeight: 22,
                        align: 'center'
                      },
                      // abg: {
                      //     backgroundColor: '#333',
                      //     width: '100%',
                      //     align: 'right',
                      //     height: 22,
                      //     borderRadius: [4, 4, 0, 0]
                      // },
                      hr: {
                        borderColor: '#aaa',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0
                      },
                      b: {
                        fontSize: 16,
                        lineHeight: 33
                      },
                      per: {
                        color: '#eee',
                        backgroundColor: '#334455',
                        padding: [2, 4],
                        borderRadius: 2
                      }
                    }
                  }
                }
              },
              { value: 735, name: '偶尔欠费' },
              { value: 63, name: '经常欠费' }
            ]
          }
        ]
      }
      var normal = {
        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{per|{c}}',
        backgroundColor: '#eee',
        borderColor: '#aaa',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: '#999',
            lineHeight: 22,
            align: 'center'
          },
          hr: {
            borderColor: '#aaa',
            width: '100%',
            borderWidth: 0.5,
            height: 0
          },
          b: {
            fontSize: 16,
            lineHeight: 33
          },
          per: {
            color: '#eee',
            backgroundColor: '#334455',
            padding: [2, 4],
            borderRadius: 2
          }
        }
      }
      var ageOption = {
        title: {
          text: '小区年龄分布',
          //subtext: '虚构数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: ['小于20岁', '20-40岁', '40-60岁', '大于60岁']
        },
        series: [
          {
            name: '居住情况',
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 60,
                name: '小于20岁',
                label: {
                  normal: normal
                }
              },

              {
                value: 450,
                name: '20-40岁',
                label: {
                  normal: normal
                }
              },
              {
                value: 280,
                name: '40-60岁',
                label: {
                  normal: normal
                }
              },
              {
                value: 120,
                name: '60岁以上',
                label: {
                  normal: normal
                }
              }
            ]
          }
        ]
      }
      var typeOption = {
        title: {
          text: '房屋面积分布',
          //subtext: '虚构数据',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: -5,
          left: 'center',
          data: ['小于90平', '90-130平', '大于130平']
        },
        series: [
          {
            name: '面积分布',
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: [
              {
                value: 360,
                name: '小于90平',
                label: {
                  normal: normal
                }
              },

              {
                value: 450,
                name: '90-130平',
                label: {
                  normal: normal
                }
              },
              {
                value: 280,
                name: '大于130平',
                label: {
                  normal: normal
                }
              }
            ]
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
      myAgeChart.setOption(ageOption)
      myCreChart.setOption(creOption)
      areaChart.setOption(typeOption)
    },
    treeNodeClick(data, node) {
      if (data.leaf == true) {
        this.drawLine()
      }
    }
  },
  mounted() {}
}
</script>
